<template>
  <div id="app">
    <el-form
      class="base-form"
      ref="baseForm"
      :model="baseForm"
      :rules="rules"
      auto-complete="on"
    >
      <el-table
        ref="table-input"
        class="table"
        highlight-current-row
        :data="baseForm.demoList"
      >
        <el-table-column label="姓名" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-form-item
              :prop="'demoList.' + scope.$index + '.name'"
              :rules="rules.name"
              class="all"
            >
              <el-input
                v-model="scope.row.name"
                placeholder="请输入"
                clearable
                @focus="
                  $refs.baseForm.clearValidate(`demoList.${scope.$index}.name`)
                "
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="年龄" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-form-item
              :prop="'demoList.' + scope.$index + '.age'"
              :rules="rules.age"
              class="all"
            >
              <el-input
                v-model="scope.row.age"
                placeholder="请输入"
                clearable
                @focus="
                  $refs.baseForm.clearValidate(`demoList.${scope.$index}.age`)
                "
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="radio" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-form-item
              :prop="'demoList.' + scope.$index + '.age'"
              :rules="rules.age"
              class="all"
            >
              <el-radio-group v-model="scope.row.radio">
                <el-radio :label="3">备选项</el-radio>
                <el-radio :label="6">备选项</el-radio>
                <el-radio :label="9">备选项</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="出生日期" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-form-item
              :prop="'demoList.' + scope.$index + '.birthday'"
              :rules="rules.birthday"
              class="all"
            >
              <el-date-picker
                placeholder="请选择"
                v-model="scope.row.birthday"
                format="yyyy-MM-dd"
                clearable
                @focus="
                  $refs.baseForm.clearValidate(
                    `demoList.${scope.$index}.birthday`
                  )
                "
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="详细地址" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-form-item
              :prop="'demoList.' + scope.$index + '.address'"
              :rules="rules.address"
              class="all"
            >
              <el-input
                v-model="scope.row.address"
                placeholder="请输入"
                clearable
                @focus="
                  $refs.baseForm.clearValidate(
                    `demoList.${scope.$index}.address`
                  )
                "
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="flex-c-a margin-top-10">
      <el-button @click="submit">提交</el-button>
      <el-button @click="add">添加</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseForm: {
        demoList: [
          {
            name: "",
            age: "",
            birthday: "",
            address: "",
            radio: ''
          },
        ],
      },
      index: 0,
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        birthday: [
          { required: true, message: "请选择出生日期", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    add() {
      this.baseForm.demoList.push({
        name: "",
        age: "",
        birthday: "",
        address: "",
      });
    },
    submit() {
      this.$refs.baseForm.validate((valid) => {
        if (valid) {
          this.$confirm("您确定【提交】？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            console.log("校验通过");
          });
        }
      });
    },
  },
};
</script>

<style>
</style>